<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> 
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<link href="img/css/css.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/demo.Default.css" />
<style type="text/css">
.voice_btn{
	width: 100px;
	background-color: #1e1e1e;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #FFF;
	height:60px;
	line-height: 60px;
	font-size:13px;
}
.popup{
	background-color: #1e1e1e;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #8d8d8d;
	width:90%;
	overflow:auto;
	position: absolute;
	z-index: 99;
	left:4%;
	top: 10%;
}
.disable{
	filter: gray;
	-moz-opacity:0.3;
	opacity:0.3;
}
</style>
<script src="http://webapi.amap.com/maps?v=1.3&key=57c58c7b1f94514317df97e3a985962c"></script>
<script language="javascript" type="text/javascript" src="js/WdatePicker.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/QueryStringParser.js"></script>
<script type="text/javascript" src="js/jquery.json.min.js"></script>  
<script type="text/javascript" src="js/jsonMsg.js"></script>  
<script language="javascript">
var mapObj, geolocation, markerFF, markers = [], geoSuccessListener, geoErrorListener;
var toolBar;
var locationInfo;
var windowsArr = [];
var marker = [];
var memberList = [];
var latLon = "";
var lat_me = "";
var lon_me = "";
var openId = queryString.getParam("openid");
var tripId = queryString.getParam("tripid"); 
var isLeaderFlag = false;
var customMarker = new AMap.Marker({
	offset:new AMap.Pixel(-14,-34),//相对于基点的位置
	icon:new AMap.Icon({  //复杂图标
		size:new AMap.Size(27,36),//图标大小
		image:"http://webapi.amap.com/images/custom_a_j.png", //大图地址
		imageOffset:new AMap.Pixel(-28,0)//相对于大图的取图位置
	})
});

function setLocation() {
    if (geolocation) {
        geolocation.getCurrentPosition();
        //geolocation.watchPosition();
    }
    else {
        setTimeout(setLocation, 1000);
    }
}

//获取团员地址时，如果某个人团员下线了，则把头像从地图上移除掉
function deleteNotInMarkers(memberData) {
    var flag = true;
    for (var i = 0, j = markers.length; i < j; i++) {
        var m = markers[i];
        flag = true;
        for (var _i = 0, _j = memberData.length; _i < _j; _i++) {
            var md = memberData[_i];
            if (m.getTitle() === md.OpenID) {
                flag = false;
                break;
            }
        }
        if (flag) {
            m.setMap(null);
        }
    }
}

//显示所有人的位置头像
function showAllPositions(allPositions) {
    for (var i = 0, j = allPositions.length; i < j; i++) {
        var mP = allPositions[i];
        if (mP.Loc.Longitude != "0" && mP.Loc.Latitude != "0" && mP.OpenID != openId) {
        		var headImg = "";
        		var nickNm = "";
        		var isLeader = false;
        		for(var k=0; k<memberList.length; k++){
        				if(memberList[k].OpenID==mP.OpenID){
        						headImg = memberList[k].ImageURL;
        						nickNm = memberList[k].Nickname;
        						break;
        				}
        		}
        		if(tripLeaderId==mP.OpenID){
        				isLeader = true;
        		}

        		
            setMemberLocation(mP.OpenID, mP.Loc.Longitude/1000000, mP.Loc.Latitude/1000000, headImg, isLeader, 20,nickNm);
        }
    }
}

//当开着这个页面的时候，上传位置信息
function updateMemberPositions(_lat, _lng) {

    var loc = {
			Latitude: 29.579916,
			Longitude: 115.98905	
		};
		
		loc.Latitude = parseFloat(_lat)*1000000;
	  loc.Longitude = parseFloat(_lng)*1000000;
	
		var dynamicInfo = {  
	    ActiveTripID: tripId,
			Loc : loc
		};
		var dataStr = {    
	        DynamicInfo: dynamicInfo

	  };  
		var bodyStr = popBody('DynamicInfoTrip',dataStr);
		var request = popRequest('DynamicInfoTrip',openId,bodyStr);
		//调用了jquery.json 库  
		var encoded = $.toJSON( request );  
		var jsonStr = encoded;  
		
		$.ajax({  
	    	url : actionStr,  
	    	type : 'POST',  
	    	data : jsonStr,  
	    	dataType : 'json',  
	    	contentType : 'application/json',  
	    	success : function(data, status, xhr) {  
	    		//Do Anything After get Return data  
	    		lastMemberLocList = data.portalResp.Data;
					showAllPositions(data.portalResp.Data);
					//deleteNotInMarkers(data.portalResp.Data);		
	    	},  
	    	Error : function(xhr, error, exception) {  
	    		    // handle the error.    
	            alert(exception.toString());  
	    	}  
		});  
}

var lastMemberLocList = [];
function showPicClickLoc() {
    for (var i = 0, j = lastMemberLocList.length; i < j; i++) {
        var mP = lastMemberLocList[i];
        //if (mP.Loc.Longitude != "0" && mP.Loc.Latitude != "0" && mP.OpenID != openId) {
        if (mP.Loc.Longitude != "0" && mP.Loc.Latitude != "0" ) {
        		if(document.getElementById(mP.OpenID)){
        			var js = "mapObj.setZoomAndCenter(15, new AMap.LngLat(mP.Loc.Longitude/1000000,mP.Loc.Latitude/1000000));";
							// creates a function from the "js" string
							var newclick = eval("(function(){"+js+"});");
							// clears onclick then sets click
							$("#"+mP.OpenID).attr('onclick', '').click(newclick);	
							$("#"+mP.OpenID).removeClass('disable');
        		}
            //setMemberLocation(mP.OpenID, mP.Loc.Longitude/1000000, mP.Loc.Latitude/1000000, headImg, isLeader, 20,nickNm);
        }
    }
}

function geoInit(isCenter) {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true  
        timeout: 100000,          //超过10秒后停止定位，默认：无穷大  
        maximumAge: 0,           //定位结果缓存0毫秒，默认：0  
        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true  
        showButton: false,        //显示定位按钮，默认：true  
        buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角  
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)  
        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true  
        markerOptions: { title: "locationIMG", offset: { x: -10, y: 20 }, icon: new AMap.Icon({ image: "http://webapi.amap.com/theme/v1.2/my_location.png", size: new AMap.Size(16, 16), imageOffset: { x: -24, y: -2} }) },
        showCircle: false,        //定位成功后用圆圈表示定位精度范围，默认：true  
        panToLocation: isCenter,     //定位成功后将定位到的位置作为地图中心点，默认：true  
        zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false  
    });
    mapObj.addControl(geolocation);
    geoSuccessListener = AMap.event.addListener(geolocation, 'complete', OnComplete); //返回定位信息,初始时定位后设为地图中心点  
    geoErrorListener = AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息  
}

function geoRemove() {
    mapObj.removeControl(geolocation);
    AMap.event.removeListener(geoSuccessListener);
    AMap.event.removeListener(geoErrorListener);
    if ($("div[title='locationIMG']")) {
        $("div[title='locationIMG']").parent().remove();
    }
}


function mapInit(center) {
    mapObj = new AMap.Map('iCenter', { level: 15 });
    
    mapObj.plugin(["AMap.ToolBar"],function(){		
			toolBar = new AMap.ToolBar();
			mapObj.addControl(toolBar);		
		});
		
    mapObj.plugin('AMap.Geolocation', function () {
        geoInit(false);
    });
    AMap.event.addListener(mapObj, 'dragstart', function (e) {//移动地图后再定位时不设为地图中心点
        geoRemove();
        geoInit(false);
        setLocation()
    });
		//var pageURL = location.href.split('#')[0];
		//pageURL = pageURL.substring(0,pageURL.indexOf("trip_voice"))+
    //终点
    var endmarker = new AMap.Marker({
			icon:new AMap.Icon({  //复杂图标
				image:"img/dis_icon.png" //大图地址
			})
		});
    endmarker.setPosition(center);                 
    endmarker.setMap(mapObj);
    mapObj.setZoomAndCenter(14, center);
};

function getExistsInMarkers(titleOpenID) {
    for (var i = 0; i < markers.length; i++) {
        var m = markers[i];
        if (m.getTitle() === titleOpenID) {
            return m;
        }
    }
    return null;
}

function setMemberLocation(_oID, _lng, _lat, _imageUrl, _isLeader, currentMember,nickNameIn) {
	var _m = getExistsInMarkers(_oID);
	if (_m) {
	    if (currentMember > 1) {
	        _m.setzIndex(currentMember);
	    }
	    _m.setMap(mapObj);
	    _m.setPosition(new AMap.LngLat(_lng, _lat));
	}
	else {
	    var marker = new AMap.Marker({});
	
	    //自定义点标记内容     
	    var markerContent = document.createElement("div");
	    markerContent.className = "user_popup";
	
	    //头像
	    var markerContentDiv2 = document.createElement("div");
	    if(_isLeader){
	    	markerContentDiv2.className = "user_img_blue";
	  	}else{
	  		markerContentDiv2.className = "user_img";	
	  	}
	    
	    var markerP2 = document.createElement("p");
	    var markerImg2 = document.createElement("img");
	    markerImg2.src = _imageUrl !== null && _imageUrl !== "" ? _imageUrl : "img/friend_pic.png";
	    markerImg2.width = 50;
	    markerImg2.height = 50;
	    markerP2.appendChild(markerImg2);
	    markerContentDiv2.appendChild(markerP2);
	    
	    var markerP22 = document.createElement("p");
	    markerP22.className = "user_popup_name";
	    markerP22.innerHTML=nickNameIn;
	    markerContentDiv2.appendChild(markerP22);
	
	    markerContent.appendChild(markerContentDiv2);
	    
	    var markerContentDiv3 = document.createElement("div");
	    markerContentDiv3.className = "downarrow";	
	    var markerImg3 = document.createElement("img");
	    if(_isLeader){
	    	markerImg3.src = "img/arrow_popup_blue.png";
	  	}else{
	  		markerImg3.src = "img/arrow_popup.png";
	  	}
	    
	    markerContentDiv3.appendChild(markerImg3);
	    markerContent.appendChild(markerContentDiv3);

	    if (currentMember > 1) {
	        marker.setzIndex(currentMember);
	    }
	
	    marker.setTitle(_oID)
	    marker.setContent(markerContent); //更新点标记内容
	    marker.setPosition(new AMap.LngLat(_lng, _lat)); //更新点标记位置                    
	    marker.setMap(mapObj);
			//mapObj.setZoomAndCenter(14, new AMap.LngLat(_lng, _lat));
			mapObj.setFitView();
	    markers.push(marker);
	}
}

function OnComplete(data) {
		lat_me = data.position.getLat();
		lon_me = data.position.getLng();
    setMemberLocation(openId, data.position.getLng(), data.position.getLat(), imageURL, tripLeaderId==openId?true:false, 20,nickName);
    updateMemberPositions(data.position.getLat(), data.position.getLng());                
}            

/* 
*解析定位错误信息 
*/
function onError(data) {
    var str = '定位失败,';
    str += '错误信息：'
    switch (data.info) {
        case 'PERMISSION_DENIED':
            str += '浏览器阻止了定位操作';
            break;
        case 'POSITION_UNAVAILBLE':
            str += '无法获得当前位置';
            break;
        case 'TIMEOUT':
            str += '定位超时';
            break;
        default:
            str += '未知错误';
            break;
    }
    updateMemberPositions(0,0);
    setLocation();
};
 
//输入提示
function autoSearch() {
    var keywords = document.getElementById("keyword").value;
    var cityName = document.getElementById("city").value;
    if(cityName==null || cityName.trim()==""){
    	alert("请先输入城市!");
    	return false;	
    }
    var auto;
    //加载输入提示插件
        AMap.service(["AMap.Autocomplete"], function() {
        var autoOptions = {
            city: cityName //城市，默认全国
        };
        auto = new AMap.Autocomplete(autoOptions);
        //查询成功时返回查询结果
        if ( keywords.length > 0) {
            auto.search(keywords, function(status, result){
            	autocomplete_CallBack(result);
            });
        }
        else {
            document.getElementById("result1").style.display = "none";
        }
    });
}
 
//输出输入提示结果的回调函数
function autocomplete_CallBack(data) {
    var resultStr = "";
    var tipArr = data.tips;
    if (tipArr&&tipArr.length>0) {                 
        for (var i = 0; i < tipArr.length; i++) {
            resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1)
                        + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1)
                        + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>";
        }
    }
    else  {
        resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";
    }
    document.getElementById("result1").curSelect = -1;
    document.getElementById("result1").tipArr = tipArr;
    document.getElementById("result1").innerHTML = resultStr;
    document.getElementById("result1").style.display = "block";
}
 
//输入提示框鼠标滑过时的样式
function openMarkerTipById(pointid, thiss) {  //根据id打开搜索结果点tip 
    thiss.style.background = '#CAE1FF';
}
 
//输入提示框鼠标移出时的样式
function onmouseout_MarkerStyle(pointid, thiss) {  //鼠标移开后点样式恢复 
    thiss.style.background = "";
}
 
//从输入提示框中选择关键字并查询
function selectResult(index) {
    if(index<0){
        return;
    }
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        document.getElementById("keyword").onpropertychange = null;
        document.getElementById("keyword").onfocus = focus_callback;
    }
    //截取输入提示的关键字部分
    var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,"");
	var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
    document.getElementById("keyword").value = text;
    document.getElementById("result1").style.display = "none";
    //根据选择的输入提示关键字查询
    mapObj.plugin(["AMap.PlaceSearch"], function() {       
        var msearch = new AMap.PlaceSearch();  //构造地点查询类
        AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
		msearch.setCity(cityCode);
        msearch.search(text);  //关键字查询查询
    });
}
 
//定位选择输入提示关键字
function focus_callback() {
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        document.getElementById("keyword").onpropertychange = autoSearch;
   }
}
 
//输出关键字查询结果的回调函数
function placeSearch_CallBack(data) {
    //清空地图上的InfoWindow和Marker
    windowsArr = [];
    marker     = [];
    mapObj.clearMap();
    var resultStr1 = "";
    var poiArr = data.poiList.pois;
    var resultCount = poiArr.length;
    for (var i = 0; i < 1; i++) {
    	latLon = poiArr[i].location;
        resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
            resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
            addmarker(i, poiArr[i]);
    }
    mapObj.setFitView();
    //document.getElementById("result").innerHTML = resultStr1;
    //document.getElementById("result").style.display = "block";
}
 
//鼠标滑过查询结果改变背景样式，根据id打开信息窗体
function openMarkerTipById1(pointid, thiss) {
    thiss.style.background = '#CAE1FF';
    windowsArr[pointid].open(mapObj, marker[pointid]);
}
 
//添加查询结果的marker&infowindow   
function addmarker(i, d) {
    var lngX = d.location.getLng();
    var latY = d.location.getLat();
    var markerOption = {
        map:mapObj,
        icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",
        position:new AMap.LngLat(lngX, latY)
    };
    var mar = new AMap.Marker(markerOption);         
    marker.push(new AMap.LngLat(lngX, latY));
 
    var infoWindow = new AMap.InfoWindow({
        content:"<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
        size:new AMap.Size(300, 0),
        autoMove:true, 
        offset:new AMap.Pixel(0,-30)
    });
    windowsArr.push(infoWindow);
    var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};
    AMap.event.addListener(mar, "click", aa);
}
 
//infowindow显示内容
function TipContents(type, address, tel) {  //窗体内容
    if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
        type = "暂无";
    }
    if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
        address = "暂无";
    }
    if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
        tel = "暂无";
    }
    var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type;
    return str;
}
function keydown(event){
    var key = (event||window.event).keyCode;
    var result = document.getElementById("result1")
    var cur = result.curSelect;
    if(key===40){//down
        if(cur + 1 < result.childNodes.length){
            if(result.childNodes[cur]){
                result.childNodes[cur].style.background='';
            }
            result.curSelect=cur+1;
            result.childNodes[cur+1].style.background='#CAE1FF';
            document.getElementById("keyword").value = result.tipArr[cur+1].name;
        }
    }else if(key===38){//up
        if(cur-1>=0){
            if(result.childNodes[cur]){
                result.childNodes[cur].style.background='';
            }
            result.curSelect=cur-1;
            result.childNodes[cur-1].style.background='#CAE1FF';
            document.getElementById("keyword").value = result.tipArr[cur-1].name;
        }
    }else if(key === 13){
        var res = document.getElementById("result1");
		if(res && res['curSelect'] !== -1){
			selectResult(document.getElementById("result1").curSelect);
		}
    }else{
        autoSearch();
    }
}

function getPageSize() {

    var xScroll, yScroll;

    if (window.innerHeight && window.scrollMaxY) {

        xScroll = window.innerWidth + window.scrollMaxX;

        yScroll = window.innerHeight + window.scrollMaxY;

    } else {

        if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac    

            xScroll = document.body.scrollWidth;

            yScroll = document.body.scrollHeight;

        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari    

            xScroll = document.body.offsetWidth;

            yScroll = document.body.offsetHeight;

        }

    }

    var windowWidth, windowHeight;

    if (self.innerHeight) { // all except Explorer    

        if (document.documentElement.clientWidth) {

            windowWidth = document.documentElement.clientWidth;

        } else {

            windowWidth = self.innerWidth;

        }

        windowHeight = self.innerHeight;

    } else {

        if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode    

            windowWidth = document.documentElement.clientWidth;

            windowHeight = document.documentElement.clientHeight;

        } else {

            if (document.body) { // other Explorers    

                windowWidth = document.body.clientWidth;

                windowHeight = document.body.clientHeight;

            }

        }

    }       

    // for small pages with total height less then height of the viewport    

    if (yScroll < windowHeight) {

        pageHeight = windowHeight;

    } else {

        pageHeight = yScroll;

    }    

    // for small pages with total width less then width of the viewport    

    if (xScroll < windowWidth) {

        pageWidth = xScroll;

    } else {

        pageWidth = windowWidth;

    }

    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);

    return arrayPageSize;

}

function popMore(){
	if(tripLeaderId==openId){
		if(document.getElementById("dropbox").style.display=='none'){
			document.getElementById("dropbox").style.display="";
		}else{
			document.getElementById("dropbox").style.display="none";
		}
	}
}
</script>
<title>查看我的旅程</title>
</head>

<body>
<div class="tool_bar">
     <font id="mines"></font>
     <div class="list_text_tool">
           <div class="list_title_tool"><font id="nickname"></font>创建的<font id="title"></font>之旅</div>
           <div class="list_dis_tool"><i class="iconfont tool_ico">&#xe610;</i>目的地：<font id="dest"></font></div>
           <div class="list_user_status">
                <p class="user_tool"><i class="iconfont tool_ico">&#xe609;</i>参与人数：<font id="members"></font>人</p>
                <p class="status_tool"><font id="validDate"></font></p>
           </div>
      </div>
      <font onclick="popMore();" style="display: none;cursor:pointer;" id="rightMenu"><div class="more_btn"><i class="iconfont">&#xe60a;</i></div></font>
</div>
<div class="drop_box" id="dropbox" style="display: none;">
    <p class="drop_box_list" id="editMenu" style="cursor:pointer;"><i class="iconfont drop_box_ico">&#xe608;</i>修改行程</p>
    <p class="drop_box_list" onclick="updateTripStatus('Terminate')" style="cursor:pointer;"><i class="iconfont drop_box_ico">&#xe60e;</i>结束行程</p>
</div>
<div class="me_icon"><font onclick="clickme();" style="cursor:pointer;"><img src="img/me_icon.png"></font></div>
<div id="iCenter" style="width:99%;height:150px;margin-top: 0px;"></div>
<script type="text/javascript">
	document.getElementById("iCenter").style.height=(getPageSize()[1]-10-130)+"px";
</script> 
<div class="bottom_bar">
     <font onclick="switchMenu();" style="cursor:pointer;"><div class="right_arrow"><i class="iconfont">&#xe613;</i></div></font>
     <font id="switchMenu">
	     <div class="btn_3_voice"><p class="ico_group"><button id="playVoiceStart" class="voice_btn" style="cursor:pointer;"><i class="iconfont img">&#xe60b;</i>播放</button></p></div>
	     <div class="btn_3_voice line_left">
	     		<div style="display: none;text-align: center;" id="stopRecordDiv"><button class="voice_btn" id="stopRecord"><i class="iconfont img">&#xe60e;</i>停止录音</button></div>
	     		<div style="display: none;text-align: center;" id="uploadVoiceDiv"><button class="voice_btn" id="uploadVoice"><i class="iconfont img">&#xe614;</i>上传</button></div>
	     		<div style="display: ;text-align: center;" id="startRecordDiv"><button class="voice_btn" id="startRecord"><i class="iconfont img">&#xe616;</i>录音</button></div>
	     	</div>
	     <div class="btn_3_voice line_left"><p class="ico_group"><button id="voiceSession" onclick="fetchVoiceList()" class="voice_btn" style="cursor:pointer;"><i class="iconfont img">&#xe615;</i>会话</button></p></div>
     </font>
</div>
<div class="popup" id="popup" style="display: none;">
		<font id="popupMsg">
	    <div class="call_group">
	         <div class="fl"><img src="img/user_pic.png" class="user_pic"></div>
	         <a href="#">
	         <div class="fl message_area ml10">
	              <p class="fl white_arrow"><img src="img/left_arrow_white.png"></p>
	              <p class="fl white_message"><i class="iconfont gray">&#xe618;</i></p>
	              <o class="fl message_time ml5">13"</p>
	         </div>
	         </a>
	    </div>
	    <div class="call_group">
	         <div class="fr"><img src="img/user_pic.png" class="user_pic"></div>
	         <a href="#">
	         <div class="fr message_area mr10">
	              <p class="fr white_arrow"><img src="img/right_arrow_green.png"></p>
	              <p class="fr green_message"><i class="iconfont white">&#xe617;</i></p>
	              <o class="fr message_time mr5">13"</p>
	         </div>
	         </a>
	    </div>
	  </font>
    <div class="popup_btn">
          <a href="javascript:void(0);" onclick="hiddenVoiceSession()"><p class="ico_group4"><i class="iconfont img">&#xe601;</i>关闭</p></a>
    </div>
</div>
</body>
</html>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">


var tripLeaderId = "";
var flag = true;

function setMenu(openId, tripId){
    $("#editMenu").click(function(){
            window.location.href="edit_trip.html?isActive=1&openid="+openId+"&tripid="+tripId;
      });
}

function updateTripStatus(stats){
		var dataStr = {
      "TripID" : tripId,
      "TripStatus" : stats 
    }; 
    var bodyStr = popBody('EditTripStatus',dataStr);
    var request = popRequest('EditTripStatus',openId,bodyStr);
    //调用了jquery.json 库  
    var encoded = $.toJSON( request );  
    var jsonStr = encoded;  

    $.ajax({  
      url : actionStr,  
      type : 'POST',  
      data : jsonStr,  
      dataType : 'json',  
      contentType : 'application/json',  
      success : function(data, status, xhr) {  
      //         Do Anything After get Return data  
        	if(stats=='Active'){
        			window.location.href="trip_voice.html?openid="+openId+"&tripid="+tripId;
        	}else{
        			window.location.href="trip_list.html?openid="+openId;	
        	}
      },  
      Error : function(xhr, error, exception) {  
          // handle the error.    
          alert(exception.toString());  
      }  
    });  
}

function uploadVoiceId(voiceId){
		var dataStr = {
      "TripID" : parseInt(tripId, 10),
      "VoiceType": 1,
      "VoiceID" : voiceId 
    }; 
    var bodyStr = popBody('UploadVoice',dataStr);
    var request = popRequest('UploadVoice',openId,bodyStr);
    //调用了jquery.json 库  
    var encoded = $.toJSON( request );  
    var jsonStr = encoded;  

    $.ajax({  
      url : actionStr,  
      type : 'POST',  
      data : jsonStr,  
      dataType : 'json',  
      contentType : 'application/json',  
      success : function(data, status, xhr) {  
      //         Do Anything After get Return data  
        	alert("上传语音成功!");
      },  
      Error : function(xhr, error, exception) {  
          // handle the error.    
          alert(exception.toString());  
      }  
    });  
}

function switchMenu(){
		var contain = "";
		if(flag){
			if(memberList!=null && memberList.length>0){
				$("#switchMenu").html("");	
				$.each(memberList, function(index){
						var nickName = memberList[index].Nickname;
						var imageURL = memberList[index].ImageURL;
						if(tripLeaderId==memberList[index].OpenID){
							contain+='<div class="user_group highlight"><p><img class="disable" src="'+imageURL+'" width="40px" height="40px" id="'+memberList[index].OpenID+'"></p> <p class="user_group_name">'+nickName+'</p></div>';
						}else{
							contain+='<div class="user_group"><p><img class="disable" src="'+imageURL+'" width="40px" height="40px" id="'+memberList[index].OpenID+'"></p> <p class="user_group_name">'+nickName+'</p></div>';
						}
		    }); 
		    $("#switchMenu").html(contain);	
		    setInterval(showPicClickLoc, 500);
	  	}
	  	flag = false;
	  }else{
	  	flag = true;	
	  	$("#switchMenu").html("");
	  	contain+='<div class="btn_3_voice"><p class="ico_group"><button id="playVoiceStart" class="voice_btn" style="cursor:pointer;"><i class="iconfont img">&#xe60b;</i>播放</button></p></div>';
	    contain+=' <div class="btn_3_voice line_left">';
	    contain+=' 		<div style="display: none;text-align: center;" id="stopRecordDiv"><button class="voice_btn" id="stopRecord"><i class="iconfont img">&#xe60e;</i>停止录音</button></div>';
	    contain+=' 		<div style="display: none;text-align: center;" id="uploadVoiceDiv"><button class="voice_btn" id="uploadVoice"><i class="iconfont img">&#xe614;</i>上传</button></div>';
	    contain+=' 		<div style="display: ;text-align: center;" id="startRecordDiv"><button class="voice_btn" id="startRecord"><i class="iconfont img">&#xe616;</i>录音</button></div>';
	    contain+=' 	</div>';
	    contain+=' <div class="btn_3_voice line_left"><p class="ico_group"><button id="voiceSession" onclick="fetchVoiceList()" class="voice_btn" style="cursor:pointer;"><i class="iconfont img">&#xe615;</i>会话</button></p></div>';

	    $("#switchMenu").html(contain);	
	    setInterval(enableWechatJS, 500);
	  }
}

function clickme(){
		mapObj.setZoomAndCenter(15, new AMap.LngLat(lon_me,lat_me));
}

var pageURL = location.href.split('#')[0];
var voice = {
    localId: '',
    serverId: ''
};

function startVoice(voiceId){
	voice.serverId = voiceId;
	        	
	wx.downloadVoice({
    serverId: voice.serverId,
    success: function (res) {
      voice.localId = res.localId;
      
      if (voice.localId == '') {
	      alert('没有最新的语音信息！');
	      return;
	    }
	    wx.playVoice({
	      localId: voice.localId
	    });
    }
  });
}
  
function loadWechatVoice(){
		var dataStr = {
			PageURL: 	pageURL
		};	
		var bodyStr = popBody('JSSignature',dataStr);
		var request = popRequest('JSSignature',openId,bodyStr);
		//调用了jquery.json 库  
		var encoded = $.toJSON( request );  
		var jsonStr = encoded;  

		$.ajax({  
		url : actionStr,  
		type : 'POST',  
		data : jsonStr,  
		dataType : 'json',  
		contentType : 'application/json',  
		success : function(data, status, xhr) {  
		//         Do Anything After get Return data  
		        var timestamp = data.portalResp.Data.timestamp;
		        var noncestr = data.portalResp.Data.noncestr;
		        var signature = data.portalResp.Data.signature;
		        var appId = data.portalResp.Data.appId;  
		        
		         /*
					   * 注意：
					   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
					   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
					   * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
					   *
					   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
					   * 邮箱地址：weixin-open@qq.com
					   * 邮件主题：【微信JS-SDK反馈】具体问题
					   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
					   */
					  wx.config({
					      debug: false,
					      appId: appId,
					      timestamp: timestamp,
					      nonceStr: noncestr,
					      signature: signature,
					      jsApiList: [
					      	'hideOptionMenu',
					      	'showOptionMenu',
					      	'stopRecord',
					      	'onRecordEnd',
					      	'playVoice',
					      	'pauseVoice',
					      	'stopVoice',
					      	'uploadVoice',
					      	'downloadVoice',
					        'startRecord'
					      ]
					  });
					
					wx.ready(function () {
						
						wx.hideOptionMenu();
					  enableWechatJS();  

					});
				
					wx.error(function (res) {
					  alert(res.errMsg);
					});
		},  
		Error : function(xhr, error, exception) {  
		    // handle the error.    
		    alert(exception.toString());  
		}  
		});  	
}

function enableWechatJS(){
		wx.ready(function () {
						
						
					    // 4 音频接口
						  // 4.2 开始录音
						  document.querySelector('#startRecord').onclick = function () {
						  	document.getElementById("stopRecordDiv").style.display="";
						  	document.getElementById("uploadVoiceDiv").style.display="none";
						  	document.getElementById("startRecordDiv").style.display="none";
						    wx.startRecord({
						      cancel: function () {
						        alert('用户拒绝授权录音');
						      }
						    });
						  };
						
						  // 4.3 停止录音
						  document.querySelector('#stopRecord').onclick = function () {
						  	document.getElementById("stopRecordDiv").style.display="none";
						  	document.getElementById("uploadVoiceDiv").style.display="none";
						  	document.getElementById("startRecordDiv").style.display="";
						    wx.stopRecord({
						      success: function (res) {
						        voice.localId = res.localId;
						        if (voice.localId == '') {
								      alert('请先点击开始录音按钮录制一段声音');
								      return;
								    }
								    wx.uploadVoice({
								      localId: voice.localId,
								      isShowProgressTips: 1, // 默认为1，显示进度提示
								      success: function (res) {
								        //alert('上传语音成功，serverId 为' + res.serverId);
								        voice.serverId = res.serverId;
								        uploadVoiceId(res.serverId);
								      }
								    });
						      },
						      fail: function (res) {
						        alert(JSON.stringify(res));
						      }
						    });
						  };
						
						  // 4.4 监听录音自动停止
						  wx.onVoiceRecordEnd({
						    complete: function (res) {
						      voice.localId = res.localId;
						      alert('录音时间已超过一分钟');
						    }
						  });
						
						  // 4.5 播放音频
						  document.querySelector('#playVoiceStart').onclick = function () {
								var dataStr = {
						      "TripID" : parseInt(tripId, 10),
						      "VoiceType": 1,
						      "Cursor" : 0,
						      "Limit": 1,
						      "OpenID" : openId 
						    }; 
						    var bodyStr = popBody('ListVoice',dataStr);
						    var request = popRequest('ListVoice',openId,bodyStr);
						    //调用了jquery.json 库  
						    var encoded = $.toJSON( request );  
						    var jsonStr = encoded;  
						    $.ajax({  
						      url : actionStr,  
						      type : 'POST',  
						      data : jsonStr,  
						      dataType : 'json',  
						      contentType : 'application/json',  
						      success : function(data, status, xhr) {  
						      //         Do Anything After get Return data  
						      		if(data.portalResp.Data.Voices[0].OpenID){
							        	var lastestOpenId =  (data.portalResp.Data.Voices[0].OpenID);
							        	var lastestImage =  (data.portalResp.Data.Voices[0].ImageURL);
							        	var lastestVoiceID =  (data.portalResp.Data.Voices[0].VoiceID);
							        	var lastestNickName =  (data.portalResp.Data.Voices[0].NickName);
							        	voice.serverId = lastestVoiceID;
							        	
							        	wx.downloadVoice({
										      serverId: voice.serverId,
										      success: function (res) {
										        voice.localId = res.localId;
										        
										        if (voice.localId == '') {
												      alert('没有最新的语音信息！');
												      return;
												    }
												    wx.playVoice({
												      localId: voice.localId
												    });
										      }
										    });
									  	}else{
									  		alert("没有最新的语音信息！");	
									  	}
						        	
						      },  
						      Error : function(xhr, error, exception) {  
						          // handle the error.    
						          alert(exception.toString());  
						      }  
						    });  
						  };
						
						
						  // 4.8 监听录音播放停止
						  wx.onVoicePlayEnd({
						    complete: function (res) {
						      //alert('录音（' + res.localId + '）播放结束');
						    }
						  });
						  
						  // 4.8 上传语音
						  document.querySelector('#uploadVoice').onclick = function () {
						  	//alert("开始录音："+voice.localId);
						  	document.getElementById("stopRecordDiv").style.display="none";
						  	document.getElementById("uploadVoiceDiv").style.display="none";
						  	document.getElementById("startRecordDiv").style.display="";
						    if (voice.localId == '') {
						      alert('请先使用 startRecord 接口录制一段声音');
						      return;
						    }
						    wx.uploadVoice({
						      localId: voice.localId,
						      isShowProgressTips: 1, // 默认为1，显示进度提示
						      success: function (res) {
						        //alert('上传语音成功，serverId 为' + res.serverId);
						        voice.serverId = res.serverId;
						        uploadVoiceId(res.serverId);
						      }
						    });
						  };
						  
//						    // 4.9 下载语音
//							  document.querySelector('#downloadVoice').onclick = function () {
//							  	voice.serverId = "OS3TSdDrGN9E4B0ozZhV72ckMWXhMmmYKIKaolmXa4RVhJktrlqjgcRuxJ0xAeR6";
//							    if (voice.serverId == '') {
//							      alert('请先使用 uploadVoice 上传声音');
//							      return;
//							    }
//							    alert("语音ID:"+voice.serverId);
//							    wx.downloadVoice({
//							      serverId: voice.serverId,
//							      success: function (res) {
//							        alert('下载语音成功，localId 为' + res.localId);
//							        voice.localId = res.localId;
//							      }
//							    });
//							  };

					});
				
					wx.error(function (res) {
					  alert(res.errMsg);
					});
}

$(document).ready(function(){
  	
	if(openId==null || openId==""){
		return false;	
	}else{
    setMenu(openId, tripId);
    fillTripInfo(openId,tripId);    
    loadWechatVoice();
	}
	
});
var nickName,imageURL;

function hiddenVoiceSession(){
	document.getElementById("popup").style.display="none";	
}

function fetchVoiceList(){
	document.getElementById("popup").style.display="";
		var dataStr = {
      "TripID" : parseInt(tripId, 10),
      "VoiceType": 1,
      "Cursor" : 0,
      "Limit": 10,
      "OpenID" : openId 
    }; 
    var bodyStr = popBody('ListVoice',dataStr);
    var request = popRequest('ListVoice',openId,bodyStr);
    //调用了jquery.json 库  
    var encoded = $.toJSON( request );  
    var jsonStr = encoded;  
    $.ajax({  
      url : actionStr,  
      type : 'POST',  
      data : jsonStr,  
      dataType : 'json',  
      contentType : 'application/json',  
      success : function(data, status, xhr) {  
      //         Do Anything After get Return data  
      	var voiceMsg = "";
      	$.each(data.portalResp.Data.Voices, function(index){
          		var lastestOpenId =  (data.portalResp.Data.Voices[index].OpenID);
		        	var lastestImage =  (data.portalResp.Data.Voices[index].ImageURL);
		        	var lastestVoiceID =  (data.portalResp.Data.Voices[index].VoiceID);
		        	var lastestNickName =  (data.portalResp.Data.Voices[index].NickName);
		        	
		        	if(lastestOpenId!=openId){
				        	voiceMsg+='<div class="call_group">';
							    voiceMsg+='     <div class="fl"><img src="'+lastestImage+'" class="user_pic"></div>';
							    voiceMsg+='     <a href="#">';
							    voiceMsg+='     <div class="fl message_area ml10">';
							    voiceMsg+='          <p class="fl white_arrow"><img src="img/left_arrow_white.png"></p>';
							    voiceMsg+='          <font onclick="startVoice(\''+lastestVoiceID+'\')"><p class="fl white_message"><i class="iconfont gray">&#xe618;</i></p></font>';
							    voiceMsg+='          <o class="fl message_time ml5"></p>';
							    voiceMsg+='     </div>';
							    voiceMsg+='     </a>';
							    voiceMsg+='</div>';
					  	}else{
					  			voiceMsg+='<div class="call_group">';
							    voiceMsg+='     <div class="fr"><img src="'+lastestImage+'" class="user_pic"></div>';
							    voiceMsg+='     <a href="#">';
							    voiceMsg+='     <div class="fr message_area mr10">';
							    voiceMsg+='          <p class="fr white_arrow"><img src="img/right_arrow_green.png"></p>';
							    voiceMsg+='          <font onclick="startVoice(\''+lastestVoiceID+'\')"><p class="fr green_message"><i class="iconfont white">&#xe617;</i></p></font>';
							    voiceMsg+='          <o class="fr message_time mr5"></p>';
							    voiceMsg+='     </div>';
							    voiceMsg+='     </a>';
							    voiceMsg+='</div>';
					  	}
          }); 
          document.getElementById("popup").style.height=(getPageSize()[1]-120)+"px";
          document.getElementById("popupMsg").innerHTML = voiceMsg;
      },  
      Error : function(xhr, error, exception) {  
          // handle the error.    
          alert(exception.toString());  
      }  
    });  
}

function fillTripInfo(openId,tripId){
	var dataStr = {
		TripID: 	tripId
	};	
	var bodyStr = popBody('TripDetail',dataStr);
	var request = popRequest('TripDetail',openId,bodyStr);
	//调用了jquery.json 库  
	var encoded = $.toJSON( request );  
	var jsonStr = encoded;  

	$.ajax({  
	url : actionStr,  
	type : 'POST',  
	data : jsonStr,  
	dataType : 'json',  
	contentType : 'application/json',  
	success : function(data, status, xhr) {  
	//         Do Anything After get Return data  
			
			$("#title").html("");	
			$("#title").html(data.portalResp.Data.Title);	
      
      $("#dest").html("");	
			$("#dest").html(data.portalResp.Data.Destination.Name);	
			
			$("#members").html("");	
			$("#members").html(data.portalResp.Data.MemberStatus.length);	
			
			$("#validDate").html("");	
			$("#validDate").html(data.portalResp.Data.ValidDate.length>2?data.portalResp.Data.ValidDate.substring(0,data.portalResp.Data.ValidDate.length-1):data.portalResp.Data.ValidDate);	
			
			
			tripLeaderId = data.portalResp.Data.TripLeader;
			if(data.portalResp.Data.MemberStatus && data.portalResp.Data.MemberStatus.length>0){
					memberList = data.portalResp.Data.MemberStatus;
          $.each(data.portalResp.Data.MemberStatus, function(index){
          		memberList[index] = data.portalResp.Data.MemberStatus[index];
          		if(data.portalResp.Data.MemberStatus[index].OpenID==data.portalResp.Data.TripLeader){
          				$("#mines").html("");	
									$("#mines").html("<img src='"+data.portalResp.Data.MemberStatus[index].ImageURL+"'  class='user_pic'>");	
									
									$("#nickname").html("");	
									$("#nickname").html(data.portalResp.Data.MemberStatus[index].Nickname);	
          		}
          		if(data.portalResp.Data.MemberStatus[index].OpenID==openId){
          				nickName = data.portalResp.Data.MemberStatus[index].Nickname;
          				imageURL = data.portalResp.Data.MemberStatus[index].ImageURL;	
          		}
          }); 
			}
			
			mapInit(new AMap.LngLat(data.portalResp.Data.Destination.Loc.Longitude/1000000, data.portalResp.Data.Destination.Loc.Latitude/1000000));
			lat_me = data.portalResp.Data.Destination.Loc.Latitude/1000000;
			lon_me = data.portalResp.Data.Destination.Loc.Longitude/1000000;
			mapObj.setZoomAndCenter(15, new AMap.LngLat(data.portalResp.Data.Destination.Loc.Longitude/1000000,
                    data.portalResp.Data.Destination.Loc.Latitude/1000000));
                                  
      if(tripLeaderId==openId){
					document.getElementById("rightMenu").style.display="";
			}
	},  
	Error : function(xhr, error, exception) {  
	    // handle the error.    
	    alert(exception.toString());  
	}  
	});  	
}

setLocation();
setInterval(setLocation, 20000);

</script>